<template>
  <div style="display: flex">
    <!-- 聊天列表 -->

    <div
      style="
        position: relative;
        text-align: center;
        height: 75vh;
        width: 280px;
        overflow: auto;
        will-change: transform;
        direction: ltr;
        border-right: 10px solid #f6f8f9;
        cursor: pointer;
      "
    >
      <div style="position: sticky; top: 0; height: 60px">
        <el-input placeholder="请输入内容">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div
          style="
            display: flex;
            justify-content: space-around;
            padding-top: 10px;
            background: white;
          "
        >
          <div :class="[stare == 1 ? 'texto' : 'texta']" @click="stars(1)">
            会话
          </div>
          <div :class="[stare == 2 ? 'texto' : 'texta']" @click="stars(2)">
            最近
          </div>
          <div :class="[stare == 3 ? 'texto' : 'texta']" @click="stars(3)">
            星标
          </div>
        </div>
      </div>
      <div v-if="stare == 2">
        <div
          v-for="(items, index) in userList"
          :key="index"
          style="
            display: flex;
            margin-top: 10px;
            border-bottom: 1px solid #ebedf0;
            padding-bottom: 10px;
            margin-left: 2%;
          "
        >
          <div
            style="
              width: 50px;
              height: 50px;
              line-height: 50px;
              background: #f6f8f9;
            "
          >
            <!-- 头像 -->
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
          <div style="margin-left: 20px; width: 40%">
            <div>
              <div style="text-align: left; font-size: 18px">
                {{ items.userName }}
              </div>
              <div style="margin-top: 11px; text-align: left">
                {{ items.boy }}
              </div>
            </div>
          </div>
          <div style="margin-left: 30%">
            <div>
              <el-tag effect="plain" type="info">
                {{ items.tag }}
              </el-tag>

              <div style="margin-top: 11px; text-align: revert">
                {{ items.item }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>暂无数据</div>
    </div>
    <!-- 聊天内容 -->

    <div
      style="
        width: 60%;
        text-align: center;
        height: 75vh;
        border-right: 10px solid #f6f8f9;
      "
    >
      <div
        style="
          height: 60px;
          border-bottom: 1px solid rgb(246, 248, 249);
          line-height: 60px;
          text-align: left;
          margin-left: 1%;
        "
      >
        <div>客户姓名：吴亦凡</div>
      </div>
      <div class="talk_con">
        <div id="words" class="talk_show">
          <div
            v-for="(i, index) in newsBox"
            :key="index"
            :class="[i.user_type == 1 ? 'atalk' : 'btalk']"
          >
            <span v-if="i.type == 'text'">{{ i.value }}</span>
            <span v-else>
              <el-image
                :preview-src-list="srcList"
                :src="i.value"
                style="width: 100px; height: 100px"
                @click="imge(i.value)"
              />
            </span>
          </div>
        </div>
        <div class="talk_input">
          <el-popover
            v-model="emojiShow"
            height="700"
            placement="bottom"
            title="标题"
            trigger="click"
            width="500"
          >
            <el-button slot="reference">😀</el-button>
            <div class="browBox">
              <ul class="ul">
                <li
                  v-for="(items, index) in faceList"
                  :key="index"
                  class="li"
                  @click="getBrow(index)"
                >
                  {{ items }}
                </li>
              </ul>
            </div>
          </el-popover>
          <el-upload
            action="https://devapi.jbkl.com/api/upload_img"
            class="upload-demo submit-btn"
            :on-error="uploadImgErr"
            :on-success="uploadImgSuc"
            :show-file-list="false"
          >
            <el-button
              size="small"
              style="width: 60px; height: 30px"
              type="primary"
            >
              图片
            </el-button>
          </el-upload>

          <el-input
            v-model="form.value"
            placeholder="请输入内容"
            @keyup.enter.native="sendMessage"
          />
          <el-button
            class="submit-btn"
            :disabled="form.value == ''"
            type="primary"
            @click="sendMessage"
          >
            发送
          </el-button>
        </div>
      </div>
    </div>
    <!-- 资料 -->
    <div style="width: 25%; height: 75vh">
      <div
        style="
          display: flex;
          justify-content: space-around;
          padding-top: 10px;
          background: white;
          text-align: center;
          padding-bottom: 10px;
          border-bottom: 1px solid #b6aeae;
        "
      >
        <div :class="[starsab == 1 ? 'texto' : 'texta']" @click="starsa(1)">
          资料
        </div>
        <div :class="[starsab == 2 ? 'texto' : 'texta']" @click="starsa(2)">
          订单
        </div>
        <div :class="[starsab == 3 ? 'texto' : 'texta']" @click="starsa(3)">
          商品
        </div>
      </div>

      <div style="margin-left: 13%; margin-top: 35px">
        <el-descriptions :column="1" title="用户信息">
          <el-descriptions-item
            label="用户名"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">kooriookami</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="手机号"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">18100000000</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="居住地"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">苏州市</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="状态"
            :label-style="{ 'font-size': '16px' }"
          >
            <el-tag effect="plain" size="small" type="info">
              未关注公众号
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            label="联系地址"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">
              江苏省苏州市吴中区吴中大道 1188 号
            </div>
          </el-descriptions-item>
          <el-descriptions-item
            label="会话来源"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">嘉宝康乐</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script>
  // import { getSchedulingLists } from '@/api/scheduling'
  // import { getUserList } from '@/api/public'
  const appData = require('@/assets/images/emojis.json')

  export default {
    props: {},
    data() {
      return {
        userList: [
          {
            userName: '吴亦凡',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
          {
            userName: '张',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
        ],
        newsBox: [],
        form: {
          value: '',
          user_type: 2,
        },
        //表情框是否展示
        emojiShow: false,
        //表情列表
        faceList: [],
        //表情文本
        getBrowString: '',
        srcList: [],
        stare: '2', //选项卡切换 1 会话 2 最近 3 星标
        starsab: '1',
      }
    },
    mounted() {},
    created() {
      // 初始化 表情
      this.loadEmojis()
    },
    beforeMount() {
      let self = this
      //连接GoEasy
      this.goEasy.connect({
        data: {},
      })

      //接收消息
      this.pubsub.subscribe({
        channel: 'mec_1_1_all',
        onMessage: function (message) {
          const box = JSON.parse(message.content)
          self.newsBox.push(box)
        },
        onSuccess: function () {},
        onFailed: function () {},
      })
    },
    methods: {
      stars(e) {
        this.stare = e
      },
      starsa(e) {
        this.starsab = e
      },
      //加载表情，存放到表情列表中
      loadEmojis() {
        for (let i in appData) {
          this.faceList.push(appData[i].char)
        }
      },
      // 获取用户点击之后的标签 ，存放到输入框内
      getBrow(index) {
        for (let i in this.faceList) {
          if (index == i) {
            this.getBrowString = this.faceList[index]
            this.form.value += this.getBrowString
          }
        }
        this.emojiShow = false
      },
      // 聊天图片回显
      imge(e) {
        this.srcList = [e]
      },
      // 上传图片错误 回调
      uploadImgErr() {},
      // 上传图片正确 回调
      uploadImgSuc(res) {
        this.form.value = res.data
        this.form.type = 'img'
        let self = this
        if (this.form.value.trim() !== '') {
          //发送消息
          this.pubsub.publish({
            channel: 'mec_1_1_all',
            message: JSON.stringify(self.form),
            onSuccess: function () {
              self.form.value = ''
            },
          })
        }
      },
      sendMessage: function () {
        this.form.type = 'text'
        //发送消息
        let self = this
        if (this.form.value.trim() !== '') {
          //发送消息
          this.pubsub.publish({
            channel: 'mec_1_1_all',
            message: JSON.stringify(self.form),
            onSuccess: function () {
              self.form.value = ''
              var ele = document.getElementsByClassName('talk_show')
              //判断元素是否出现了滚动条
              if (ele[0].scrollHeight > ele[0].clientHeight) {
                //设置滚动条到最底部
                ele[0].scrollTop = ele[0].scrollHeight
              }
            },
          })
        }
      },
    },
  }
</script>

<style scoped>
  .texto {
    color: #1890ff;
    border-bottom: 2px solid;
  }
  .texta {
    color: #000;
  }
  .talk_con {
    width: 100%;
    background: #f9f9f9;
  }

  .talk_show {
    height: 60vh;
    background: #fff;
    margin: 10px auto 0;
    overflow: auto;
  }

  .talk_input {
    width: 100%;
    display: flex;
  }

  .atalk {
    margin: 10px;
    text-align: left;
  }

  .atalk span {
    display: inline-block;
    background: #0181cc;
    border-radius: 10px;
    color: #fff;
    padding: 5px 10px;
  }

  .btalk {
    margin: 10px;
    text-align: right;
  }

  .btalk span {
    display: inline-block;
    background: #ef8201;
    border-radius: 10px;
    color: #fff;
    padding: 5px 10px;
  }

  .itemTab {
    color: #3193ef;
    background: #e9e7e7;
  }
  /*  */
  .ul {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }
  .li {
    cursor: pointer;
    width: 10%;
    font-size: 26px;
    list-style: none;
    text-align: center;
  }
  .submit-btn {
    margin: 0 15px 10px 0;
    float: right;
  }
</style>
